<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
</head>

<body>
    <div style="margin: 20px">
        <span class="layui-breadcrumb">
            <a href="/home">首页</a>
            <a href="/cateList">商品分类列表</a>
            <a><cite>编辑分类</cite></a>
        </span>
        <div id="add" style="margin-top: 10px; max-width: 600px">
            <form class="layui-form" action="" style="margin-top: 10px">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="cateName" required lay-verify="required" placeholder="请输入标题"
                            autocomplete="off" class="layui-input" value="<%= cate.cateName %>">
                        <input type="hidden" name="_id" value="<%= cate._id %>">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父级分类</label>
                    <div class="layui-input-block">
                        <select name="pid" lay-verify="required">
                            <option value="">请选择</option>
                            <% for(var i=0;i<cates.length;i++) { %>
                            <option 
                            <%= cates[i]._id == cate.pid && 'selected' %>
                            value="<%= cates[i]._id %>"><%= cates[i].cateName %></option>
                            <% } %>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类图标</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <img src="<%= cate.cateIcon %>" width="100" alt="" id="img">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">分类描述</label>
                    <div class="layui-input-block">
                        <textarea name="cateDesc" placeholder="请输入内容" class="layui-textarea"><%= cate.cateDesc %>
                        </textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<script src="/static/lib/layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'form', 'layer', 'upload'], function () {
        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;
        var cateIcon = '';
        form.on('submit(formDemo)', function (data) {
            data.field.cateIcon = cateIcon
            delete data.field.img

            $.ajax(
                '/cateEdit', {
                    type: 'POST',
                    dataType: 'json',
                    data: data.field,
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                location.href = '/cateList'
                            })
                        } else {
                            layer.msg('修改失败', {
                                icon: 1,
                                time: 1000
                            })
                        }
                    }
                }
            )
            return false;
        });
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
                ,
            url: '/upload/' //上传接口
                ,
            field:'img'
                ,
            done: function (res) {
                $('#img').attr('src',res.data.filePath)
                cateIcon = res.data.filePath
            },
            error: function () {
                //请求异常回调
            }
        });
    });
</script>
</script>

</html>